import { Icon } from '@/components/Icon';
import styles from './index.module.scss';
import { useHistory } from 'react-router';
import { ReactNode } from 'react';
import classNames from 'classnames';

/* 封装navbar组件的属性值的写法 */

type NavBarType = {
  // ReactNode类型可以参考antd ui库
  children?: ReactNode;
  right?: ReactNode;
  onBack?: () => void;
  fixed?: boolean;
};
export default function NavBar(props: NavBarType) {
  const { children, right, onBack, fixed } = props;
  const history = useHistory();
  const handleback = () => {
    if (onBack) return onBack();
    // 跳回上一页
    history.go(-1);
  };
  return (
    <div className={styles.root}>
      <div className={classNames('main', fixed ? 'fixed' : '')}>
        {/* 后退按钮 */}
        <div className="left" onClick={handleback}>
          <Icon type="iconfanhui" />
        </div>
        {/* 居中标题 */}
        <div className="title">{children}</div>

        {/* 右侧内容 */}
        <div className="right">{right}</div>
      </div>
    </div>
  );
}
